<template>
   <!-- <ClientOnly> -->
   <div class="left">
      <ul>
         <li v-for="(item, index) in  SystemData.SystemConfig.config_slideshow" :key="index" @click="Gopath(item)"
            :class="{ active: active === index }" @mouseover="handleMouseOver" @mouseout="handleMouseOut">
            <!-- <el-image style="width: 100%; height: 100%" :src="item.img" fit="cover" /> -->
            <img class="nuxt-img" :src="item.img" />
            <div class="title">
               <div>{{ item.title }}</div>
               <p>{{ item.text }}</p>
            </div>
         </li>
      </ul>
      <div class="btn-left" @click="leftClick" @mouseover="handleMouseOver" @mouseout="handleMouseOut">
         <span class="iconfont icon-jiantou-copy"></span>
      </div>
      <div class="btn-right" @click="rightClick" @mouseover="handleMouseOver" @mouseout="handleMouseOut">
         <span class="iconfont icon-jiantou"></span>
      </div>
   </div>
   <!-- </ClientOnly> -->
</template>
<script lang="ts" setup >
import { storeToRefs } from 'pinia';
import { ElMessage } from "element-plus";
const props = defineProps({
   SystemData: {
      type: Object,
      default: {
         SystemInfo: {},
         SystemConfig: {},
         SystemAnnounceList: {},
         SystemUserInfo: [],
         SystemUserList: [],
         SystemClassifyList: [],
         SystemPostsList: [],
      }
   }
});
const active = ref(0)
const itemslength = props.SystemData.SystemConfig.config_slideshow.length - 1
// 点击左边
const leftClick = () => {
   if (active.value === 0) return active.value = itemslength
   active.value = active.value - 1
}
// 点击右边
const rightClick = () => {
   if (active.value === itemslength) return active.value = 0
   active.value = active.value + 1
}
// 自动轮播
const intervalId: any = ref(null)
const auto = () => {
   intervalId.value = setInterval(() => {
      rightClick()
   }, 5000)
}
auto()
// 鼠标移入 停止轮播
const handleMouseOver = () => clearInterval(intervalId.value)
// 鼠标移出 启动轮播
const handleMouseOut = () => auto()




// 点击跳转地址
const Gopath = (item: any) => {
   window.open(item.path)
}







</script>
<style lang="scss" scoped>
.left {
   width: 780px;
   background-color: #FFF;
   border-radius: var(--aoir-border-radius) var(--aoir-border-radius);
   box-shadow: var(--aoir-box-shadow);
   padding: 15px;
   position: relative;
   margin-right: 15px;

   ul {
      width: 100%;
      height: 100%;
      position: relative;

      li {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
         cursor: pointer;
         opacity: 0;

         animation: identifier2 1s forwards;

         @keyframes identifier2 {
            0% {
               opacity: 1
            }

            100% {
               opacity: 0
            }
         }

         .nuxt-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            border-radius: var(--aoir-border-radius);
            object-fit: cover;
         }

         .title {
            position: relative;
            bottom: 0;
            z-index: 2;
            width: 100%;
            height: 100%;
            // background: linear-gradient(to top, #0000005e, rgb(0 0 0 / 0%));
            padding: 0 40px 40px;
            border-radius: var(--aoir-border-radius);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;

            div {
               font-size: 30px;
               font-weight: 600;
               color: #FFF;
               margin-bottom: 10px;
            }

            p {
               font-size: 18px;
               color: #FFF;
            }
         }
      }

      .active {
         position: absolute;
         top: 0;
         left: 0;
         animation: identifier 1s forwards;

         @keyframes identifier {
            0% {
               opacity: 0
            }

            100% {
               opacity: 1;
               z-index: 1;
            }
         }
      }

   }



   .btn-left {
      position: absolute;
      top: 50%;
      left: -5px;
      z-index: 3;
      transform: translateY(-50%);
      width: 35px;
      height: 35px;
      border-radius: 50%;
      background-color: #FFF;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 0 20px 0 #0000001f;
      cursor: pointer;
      opacity: .9;
   }

   .btn-right {
      position: absolute;
      top: 50%;
      right: -5px;
      z-index: 3;
      transform: translateY(-50%);
      width: 35px;
      height: 35px;
      border-radius: 50%;
      background-color: #FFF;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 0 20px 0 #0000001f;
      cursor: pointer;
      opacity: .9;
   }

   .iconfont {
      position: relative;
      display: block;
      transform: rotate(270deg);
      font-weight: 600;
      font-size: 20px;
      color: #555;
   }
}
</style>